<template>
    <div class="page-payment">
      <!-- 顶部导航栏 -->
      <NavBar navbarTitle="支付"></NavBar>
      <!-- 主体内容 -->
      <div class="payment-content">
        <div class="content-title">
          <span class="title-text">请支付{{ orderInfo.price.toFixed(2) }}元</span>
          <span class="title-tip">(截图保存进行扫码支付,点击图标更换支付平台~)</span>
        </div>
        <div class="content-center">
          <img class="center-payCode" :src="paymentImg" alt="支付二维码" title="支付二维码">
        </div>
        <div class="content-payment-platform">
          <img class="platform-img" src="../../assets/images/icons/icon_wxpay.jpg" alt="" @click="change_payment(0)">
          <img class="platform-img" src="../../assets/images/icons/icon_alipay.jpg" alt="" @click="change_payment(1)">
          <img class="platform-img" src="../../assets/images/icons/icon_yfp.jpg" alt="" @click="change_payment(2)">
          <img class="platform-img" src="../../assets/images/icons/icon_boc.jpg" alt="" @click="change_payment(3)">
          <img class="platform-img" src="../../assets/images/icons/icon_ccb.jpg" alt="" @click="change_payment(4)">
        </div>
        <div class="content-btns">
          <van-button type="primary" class="btns-item" @click="complete_payment_btn">已完成支付</van-button>
          <van-button type="danger" class="btns-item" @click="payment_problems_btn">支付遇到问题?</van-button>
        </div>
        <div class="content-others">
          <span class="others-tip" @click="contact_service_btn">联系客服?</span>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar/NavBar.vue';
//引入vue组合式api
import { ref, reactive, onMounted } from "vue";
//引入vant4组件
import { Button as VanButton, showSuccessToast, showToast } from "vant";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//@ts-ignore引入请求函数
import { reqUpdateProductOrder } from "@/api/order/index.ts";

//订单信息
const orderInfo = reactive({
  orderIds:[],
  price:0
})
//支付方式图片路径
let paymentImg = ref("src/assets/images/WeiXin_pay.png");

//支付方式切换
function change_payment (payment:number) {
  switch (payment) {
    case 0:
      //微信支付
      paymentImg.value = "src/assets/images/WeiXin_pay.png";
      showToast("请使用微信扫码支付!");
      break;
    case 1:
      //支付宝支付
      paymentImg.value = "src/assets/images/Alipay.jpg";
      showToast("请使用支付宝扫码支付!");
      break;
    case 2:
      //银联支付
      showToast("支付渠道完善中,敬请期待!");
      break;
    case 3:
      //中国银行
      showToast("支付渠道完善中,敬请期待!");
      break;
    case 4:
      //建设银行
      showToast("支付渠道完善中,敬请期待!");
      break;
    default:
      paymentImg.value = "../../assets/images/WeiXin_pay.png";
      showToast("请使用微信扫码支付!");
      break;
  }
}

//已完成支付按钮
async function complete_payment_btn () {
  if(orderInfo.orderIds.length === 0 || orderInfo.price === 0) return showToast("未知错误!");
  //发请求更新订单数据
  for(let i = 0; i < orderInfo.orderIds.length; i ++){
    let res = await reqUpdateProductOrder({orderId:orderInfo.orderIds[i],orderState:"已支付"});
    console.log('更新订单信息api',res);
  }
  showSuccessToast("订单支付成功!即将跳转...");
  setTimeout(() => {
    router.push("/orderList");
  },1000);
}
//支付遇到问题按钮
function payment_problems_btn () {}
//联系客服按钮
function contact_service_btn () {}

//vue生命周期
onMounted(() => {
  //获取路径参数
  orderInfo.orderIds = route.query.orderIds.split(',');
  orderInfo.price = Number(route.query.price);
})
</script>

<style lang="less" scoped>
.page-payment{
  width: 100%;
    .payment-content{
        width: 375px;
        height: calc(100vh - 47px);
        position: relative;
        top:47px;
        background: #fff;
        overflow: auto;

        .content-title{
          width: 375px;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          .title-text{
            font-size: 16px;
            color: #000;
          }
          .title-tip{
            font-size: 12px;
            color: #9195a3;
          }
        }
        .content-center{
          width: 375px;
          height: 350px;
          display: flex;
          justify-content: center;
          align-items: center;
          .center-payCode{
            width: 280px;
            height: 350px;
          }
        }
        .content-payment-platform{
          width: 375px;
          height: 50px;
          margin: 5px 0;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .platform-img{
            width: 40px;
            height: 40px;
          }
        }
        .content-btns{
          width: 375px;
          height: 90px;
          margin: 20px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .btns-item{
            width: 330px;
            margin: 5px 0;
          }
        }
        .content-others{
          width: 375px;
          height: 20px;
          padding: 0 30px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          color: #1989fa;
        }
    }
}

</style>